<template>
  <div class="wordbooks-pages">
    <div class="wordbooks-page">
      <div class="wordbook-list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getUserWords"
        >
          <van-cell
            v-for="book in wordbooks"
            :key="book.id"
            class="wordbook-card"
            @click="testChange(book)"
          >
            <van-image
              width="100"
              height="100"
              :src="book.img"
              class="wordbook-cover"
              fit="cover"
            />
            <!-- <img :src="book.img" alt="Word Book Cover" class="wordbook-cover" /> -->
            <div class="wordbook-name">{{ book.name }}</div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import { useRouter } from "vue-router";
import {
  wordsCreate,
  getUserWordSet,
  updateWorkds,
  deleteWorkds,
} from "../api/words";

const emite = defineEmits(["clickChange"]);
const selTestNumPopup = ref(false);
const router = useRouter();
const wordbooks = ref([]);
const loading = ref(false);
const finished = ref(false);
const columns = ref([
  {
    test: "1",
    label: "1个单词",
  },
]);
const user = ref(null);

onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
  var i = 1;
  do {
    columns.value.push({
      text: i + "个单词",
      value: i,
    });
    i += 3;
  } while (i < 50);
});
const test_id = ref(null);
const reqs = ref({
  page: 1,
  limit: 10,
});
const showAddDialog = ref(false);
const newWordbookName = ref("");
const newWordbookCoverUrl = ref("");
const getUserWords = async () => {
  const res = await getUserWordSet({ user_id: user.value.id || null, ...reqs.value });
  console.log(res);
  if (res.success && res.data.length >= 1) {
    reqs.value.page++;
    loading.value = false;
    finished.value = false;
    wordbooks.value = res.data;
  } else {
    loading.value = true;
    finished.value = true;
  }
};

const testChange = (book) => {
  emite("clickChange", book.id);
};

const addWordbook = async () => {
  // 新增单词本逻辑
  if (newWordbookName.value && newWordbookCoverUrl.value) {
    const res = await wordsCreate({
      wordlist: 1,
      name: newWordbookName.value,
      img: newWordbookCoverUrl.value,
      user_id: 1,
    });
    console.log(res);
    // const newId = Math.max(0, ...wordbooks.value.map((book) => book.id)) + 1; // 生成新ID
    // wordbooks.value.push({
    //   id: newId,
    //   name: newWordbookName.value,
    //   coverUrl: newWordbookCoverUrl.value,
    // });
    newWordbookName.value = ""; // 清空输入
    newWordbookCoverUrl.value = ""; // 清空输入
    showAddDialog.value = false; // 关闭弹出层
  }
};
</script>

<style scoped>
.wordbooks-page {
  padding: 10px;
}

.wordbook-list {
  margin-bottom: 16px;
}

.wordbook-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.wordbook-cover {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.wordbook-name {
  text-align: center;
  font-weight: bold;
  padding: 10px;
}

.card-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.add-wordbook-btn {
  margin: 0 auto;
  display: block;
  width: 90%;
}

.add-wordbook-form {
  padding: 16px;
}
</style>

<style>
.wordbook-list .van-cell__value {
  display: flex;
  align-items: center;
}
</style>
